$(document).ready(function() {
    var pos_x = -1;
    var pos_y = -1;
    //marginesy miniatury obrazka
    var margin_top_thumb = 0;
    var margin_left_thumb = 0;
    function getValue(id) {
        $("#" + id).children("div").children("p.alert-danger").text("");
        if ($("#" + id).find("li.active").length === 0) {
            $("#" + id).children("div").children("p.alert-danger").text("to pole jest wymagane");
            return false;
        }
        else {
            return li = $("#" + id).find("li.active").children("input").val();
        }
    }
    //rozmiary prostokata
    var rectWidth = 150;
    var rectHeight = 100;
    //rozmiary obrazka
    var thumbWidth = parseInt($("#cross").css("width"));
    var thumbHeight = parseInt($("#cross").css("height"));
    $("#pointer_div").css("margin-top", margin_top_thumb + "px");
    $("#pointer_div").css("margin-left", margin_left_thumb + "px");
    $(".preview").css("margin-top", margin_top_thumb + "px");
    $(".preview").css("margin-left", margin_left_thumb + "px");
    $(".rect").css("width", rectWidth + "px");
    $("#pointer_div").mouseover(function() {
        $("#pointer_div").children(".rect").removeClass("hidden");
        $(".preview").removeClass("hidden");
    });
    $("#pointer_div").mouseout(function() {
        $("#pointer_div").children(".rect").addClass("hidden");
        $(".preview").addClass("hidden");
        // pos_x=-1;
        // pos_y=-1;
    });
    $(".rect").css("height", rectHeight + "px");
   // console.log(thumbWidth);
    $(".thumb").click(function(){
       var name = $(this).attr("name");
       var shop = $(this).attr("src").split("/")[2];
       var src300px= "/img/"+shop+"/300px/"+name;
       var src800px= "/img/"+shop+"/800px/"+name;
       $("#pointer_div").children("img").attr("src",src300px);
       $(".preview").children("img").attr("src",src800px);
       thumbWidth = parseInt($("#cross").css("width"));
       thumbHeight = parseInt($("#cross").css("height"));
    });
    function setRect(event) {
        pos_x = event.pageX - $("#pointer_div").offset().left;
        pos_y = event.pageY - $("#pointer_div").offset().top;
        // console.log(event);
        //  console.log(event);
        //aktualna pozycja prostokata kadrujacego
        var curX = pos_x - rectWidth / 2 - margin_left_thumb;
        var curY = pos_y - rectHeight / 2 - margin_top_thumb;
//                    $("#x").text(pos_x);
//                    $("#y").text(pos_y);
        //sprawdzenie granic  prostokąta kadrującego
        //lewo
        if (pos_x < rectWidth / 2) {
            curX = 0;
        }
        //prawo
        if (pos_x > thumbWidth - rectWidth / 2)
        {
            curX = thumbWidth - rectWidth;
        }
        //góra
        if (pos_y < rectHeight / 2) {
            curY = 0;
        }
        //dół
        if (pos_y > thumbHeight - rectHeight / 2)
        {
            curY = thumbHeight - rectHeight;
        }
        $(".rect").css("left", curX);
        $(".rect").css("top", curY);
        //wymiary obrazka
        var pictureWidth = parseInt($(".preview").children("img").css("width"));
        var pictureHeight = parseInt($(".preview").children("img").css("height"));
        //graniczne pozycje prostokąta kadrującego w %
        var left = curX / thumbWidth;
        var right = (curX + rectWidth) / thumbWidth;
        var top = curY / thumbHeight;
        var bottom = (curY + rectHeight) / thumbHeight;
        //rozmiar podglądu
        $(".preview").css("width", pictureWidth * right - pictureWidth * left);
        $(".preview").css("height", pictureHeight * bottom - pictureHeight * top);

        //pozycja obrazka po kadrowaniu
        $(".preview").children("img").css("left", -(left * pictureWidth - margin_left_thumb));
        $(".preview").children("img").css("top", -(top * pictureHeight - margin_top_thumb));
    }
     $("ul.dropdown-menu").children("li").click(function() {
        $(this).parents("ul").children("li").removeClass("active");
        $(this).addClass("active");
        $(this).parent("ul").prev("button").html($(this).html() + "<span class=\"caret\">");
        $(this).parent("ul").parent("div").next("p").text("");
    });
    $("#pointer_div").children("img").mousemove(setRect);
    $(".rect").mousemove(setRect);
    $("#formAddMark").submit(function(event) {
        event.preventDefault();
        var mark = getValue("mark");
        var content = $("#textarea_description").val();
         var url = window.location.href;
         $.post(url,
                    {
                        mark: mark,
                        content: content                      
                    }).done(function(evt) {
                       console.log(evt);
                window.location.href=url;
            });
    });
});